<template>
	<app-layout>
		<view class="template-order">
			<!-- 顶部自定义导航 -->
			<search-top ref="search" @search="Search" :searchForm="searchForm">
				<tn-subsection class="tn-border-solid-bottom" @change="setType" :height="80" mode="button"
					:borderRadius='0' backgroundColor="#fff" :list="datelist"></tn-subsection>

			</search-top>
			<view v-if="list.length>0" class="nav-height"> </view>
			<view class="list">
				<!-- 工单-->
				<view class="report tn-text-md" v-for="report in list" :key="report.id"
					@click="goDetail(report['入库单号'])">
					<view class="status" :class=" report['审核']==1?'tn-bg-green' :'tn-bg-orange'">
						<view class="tn-icon-bookmark-fill"></view>
						{{ report['审核']==1?'审核通过' : '待审核'}}
					</view>

					<view class="">
						<view class="row">
							<view class="value tn-text-bold tn-text-lg">
								入库单号：{{report['入库单号']}}
							</view>
						</view>
						<view class="value">
							入库日期：{{report['入库日期']}}
						</view>
						<view class="row">
							<view class="value">
								供应商：{{report['供应商'] || ''}}
							</view>
							<view class="value">
								制单人：{{report['制单人'] || ''}}
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>

		<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
		<view class='tn-tabbar-height'></view>
		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import SearchTop from '@/components/SearchTop'

	import {
		mapGetters,
		mapState
	} from "vuex";
	export default {
		name: 'worker',
		mixins: [templatePageMixin],
		components: {
			SearchTop
		},
		data() {
			return {
				page: 1,
				list: [],
				searchForm: {
					work_number: '',
					name: '',
					procedure: '',
					date_start:'',
					date_end: '',
				},
				total: [],
				datelist: ['全部', '待审', '已审', '今天', '昨天'],
				info: {}
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo,
			})
		},
		onShow() {
			if (!this.userinfo) {
				this.$user.getInfo()
			}
			// this.getList(1)
		},
		onLoad(options) {

		},

		onReachBottom() {
			this.getList();
		},
		methods: {
			setType(e) {
				this.$refs['search'].setType(e)
			},

			Search(e) {
				console.log(e)
				this.searchForm = e;
				this.getList(1)
			},
			// 跳转
			goDetail(purchase_no) {
				uni.redirectTo({
					url: `mes/putin/detail?purchase_no=${purchase_no}`,
				});
			},

			getList(issearch = 0) {
				let that = this;
				that.$t.message.loading("加载中");
				if (issearch) that.page = 1, that.list = [];

				that.$request({
					url: that.$api.putin.list,
					data: {
						limit_page: that.page,
						limit_count: 20,
						Fstaffld: that.userinfo.Fstaffld,
						pi_no: that.searchForm.work_number || '',
						...that.searchForm,
					}
				}).then(response => {
					that.$t.message.closeLoading();
					that.setTotal(response.count);
					if (that.page !== 1) {
						that.list = that.list.concat(response.list);
					} else {
						that.list = response.list;
					}
					that.page = response.list.length ? that.page + 1 : that.page;
					that.more = false
				}).catch((msg) => {
					that.$t.message.toast(msg);
					that.$t.message.closeLoading();
				});
			},
			setTotal(arr) {
				this.total = [];
				Object.keys(arr).forEach(key => {
					this.total.push({
						name: key,
						count: arr[key]
					})
					console.log(key, arr[key]);
				});

			}

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		margin-top: 100upx;
	}

	.nav-height {
		height: 100upx;
	}

	.total {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		padding-bottom: 20px;
		background: #fff;
		padding: 20upx;
		border-top: 1upx solid #d3d3d3;

		.col {
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.title {
				text-align: center;
				font-size: 26upx;
			}
		}
	}



	.report {
		background: #fff;
		padding: 20upx;
		border: 1upx solid #eee;
		margin: 10upx;
		border-radius: 10upx;
		box-shadow: 1px 1px 0px 0px #aba7a7;
		position: relative;

		.status {

			display: flex;
			min-width: 150upx;
			align-items: center;
			justify-content: center;
			color: #fff;
			position: absolute;
			right: 0;
			top: 20upx;
			padding: 10upx 0;
			border-top-left-radius: 25upx;
			border-bottom-left-radius: 25upx;
			// transform: rotate(45deg);
			// clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
		}

		.btn {
			padding-top: 20upx;
			padding-top: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 0;
		}

		.value {
			min-width: 50%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.tn-form-item {
			padding: 0;
		}
	}
</style>